import { memo, useState } from 'react';
import ScrollPageView from 'components/ScrollPageView';
import ArticleItem from './ArticleItem';
import SkeletonItem from './SkeletonItem';
import usePagination from 'hooks/usePagination'
import {articleListApi} from "./api";

interface HomeProps {
  selected: boolean,
  initialize: false
}

var iarr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

function Home(props: HomeProps) {
  if (!props.initialize) {
    return <view></view>
  }
  const [current, setCurrent] = useState(0)
  const {list, setIncreasing} = usePagination(articleListApi)

  const _view = {
    display: props.selected ? 'block' : 'none'
  }

  return (
    <ScrollPageView
      navigation={{title: '首页'}}
      navigationBarStyle={{ backgroundColor: '#FFF' }}
      scrollViewStyle={{ backgroundColor: '#FFF' }}
      isBottomPlaceholder
      enableBackToTop
      style={_view}
      onScrollToLower={() => setIncreasing(true)}
      showScrollbar={false}
      enhanced
    >
      {list.length === 0 && iarr.map((item) => (
        <SkeletonItem key={`hello ${item}`} />
      ))}
      {list.map((article, index) => (
        <ArticleItem
          key={article._id}
          {...article}
          selected={index === current}
          onClick={() => setCurrent(index)}
        />
      ))}
    </ScrollPageView>
  )
}

export default memo(Home);
